require('./Pagejdzflist.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea} from  'react-weui/build/packages'
import zb  from './../../../assets/icon/zhzj/坐标.png';
import ht  from './../../../assets/icon/zhzj/话筒.png';
import yuanlinlvhua  from './../../../assets/img/园林绿化.png';
import ludeng  from './../../../assets/img/路灯.png';
import jingguandeng  from './../../../assets/img/景观灯.png';
import anquanwenming  from './../../../assets/img/安全文明施工.png';
import {Control} from 'react-keeper';


class Jdzflist extends React.Component {
  constructor(props) {
    super(props);
    this.scrollLoadMore = this.scrollLoadMore.bind(this);
    this.clearList = this.clearList.bind(this);
  }

  scrollLoadMore() {
    let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度
    let scrollTop = this.refs.bodyBox.scrollTop;  //滚动条滚动高度
    let scrollHeight = this.refs.bodyBox.scrollHeight; //滚动内容高度
    if ((clientHeight + scrollTop) == (scrollHeight)) { //如果滚动到底部 }
      Actions.scrollLoadMore();
    }
  }

  clearList() {
    Actions.clearList();
  }

  render() {
    return (
      <div className="page dgzslist" height="100%"
           onScroll={this.scrollLoadMore}
           ref="bodyBox">
        {this.state.jdzflist.suggestList.map((item, i)=> {
          return (
            <Panel>
              <PanelBody>
                <MediaBox type="appmsg" onClick={(e) =>
                {Control.go('/dgzshome/edit',
                  {dataDetail:item,
                    domain:this.state.jdzflist.domain,
                    mediaUploadPath:this.state.jdzflist.mediaUploadPath
                  })}}>
                  <MediaBoxHeader>
                    <img src={item.suggesttype==1?ludeng:
                      item.suggesttype==2?jingguandeng:
                        item.suggesttype==3?anquanwenming:
                          item.suggesttype==4?yuanlinlvhua:null} style={{
                      width:30,
                      height:30,
                      marginTop:15
                    }}/>
                  </MediaBoxHeader>
                  <MediaBoxBody>
                    <MediaBoxTitle style={{
                      width:"64%",
                      float:"left"
                    }}>
                      <span className="pname">{item.title}下下下下下</span>
                    </MediaBoxTitle>
                    <MediaBoxTitle style={{
                      width:"35%",
                      float:"left"
                    }}>
                      <span className="chulizhuangtai">{
                        item.datastatus == 2 ? '已撤销' :
                          item.viewstatus == 1 ? '已提交待回复' : '已回复'
                      }</span>
                    </MediaBoxTitle>
                    <MediaBoxDescription style={{
                      float:"left",
                      width:"100%"
                    }}>
                      {item.createTime}
                    </MediaBoxDescription>
                    <MediaBoxDescription style={{
                      float:"left"
                    }}>
                      <img src={zb}
                           style={{
                             width: '15px',
                             height:'15px',
                             marginRight: '5px'
                           }}/>
                      <span className="pname">{item.location}</span><br/>
                      <img src={ht}
                           style={{
                             width: '15px',
                             height:'15px',
                             marginRight: '5px'
                           }}/>
                      <span className="pname">{item.viewdesc}</span>
                    </MediaBoxDescription>
                  </MediaBoxBody>
                </MediaBox>
              </PanelBody>
            </Panel>
          )
        })
        }

      </div>);
  }

  componentWillMount() {
    //清空list
    Actions.clearList();
    if (Control.state) {
      Actions.loadSuggestionList(Control.state);
    } else {
      Actions.loadSuggestionList();
    }

  }

  componentDidMount() {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.jdzflist || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Jdzflist, Reflux.connect(Store, 'jdzflist'));


export default Jdzflist ;
